<template>
    <div class="nearby">
        <h3 class="nearby_title">附近店铺</h3>
        <div class="nearList">
            <router-link  class="nearList__item" v-for="item in shopArr" :key=item.id :to="`/shop/${item.id}`"  >
                <ShopItem :item="item"></ShopItem>
            </router-link>
        </div>
    </div>
</template>

<script setup lang="ts">
import {reactive, toRefs} from 'vue'
import { get } from "../utils/require";
import type { NearbyItem }  from '../types/types'
import ShopItem from '../components/ShopItem.vue'
const state = reactive({
    shopArr:[] as NearbyItem[]
})

const getShopList = async () =>{
    const res = await get("api/getShopList")
    if(res.code==0){
        state.shopArr = res.data
        
    }
}
const {shopArr} = toRefs(state)

getShopList()
</script>

<style lang="scss" scoped>
.nearby {
    .nearby_title {
        font-size: 18px;
        color: #333333;
        margin-left: .18rem;
        margin-top: .16rem;
    }
    .nearList__item{
        text-decoration: none;
    }
    .nearList {
        padding-bottom: .49rem;
        &__item {
            display: flex;
            margin: 0.12rem;
            &__img {
                width: 0.56rem;
                height: 0.56rem;
                margin-left: 0.18rem;
                margin-right: 0.16rem;
            }
            &__content {
                flex:1;
                color: #333;
                .title {
                    font-size: 0.16rem;
                    line-height: .22rem;
                    margin-bottom: 0.08rem;
                }
                .tag {
                    font-size: 0.13rem;
                    margin-bottom: 0.08rem;
                    line-height: .18rem;
                }
                .red {
                    color: #e93b3b;
                    margin-bottom: .08rem;
                }
            }
        }
    }
}
</style>